$(function() {
    let q = {
        pagenum: '1',
        pagesize: '3',
        cate_id: '',
        state: ''
    }

    initArticleList()

    function initArticleList() {
        axios({
            method: 'GET',
            url: '/my/article/list',
            params: q
        }).then(res => {
            // console.log(res.data);
            if (res.data.status != 0) {
                return layui.layer.msg(res.data.message)
            }
            layui.layer.msg(res.data.message)
            let arr = []
            res.data.data.forEach(e => {
                arr.push(`
                <tr>
                        <td>
                            <a href="/拓展/preview/preview.html?${e.Id}" id="title" target="fm-preview" class="preview">《${e.title}》</a>
                        </td>
                        <td>${e.cate_name}</td>
                        <td>${formatDate(e.pub_date)}</td>
                        <td>${e.state}</td>
                        <td>
                            <a href="/拓展/amend/amend.html?${e.Id}" class="layui-btn amend layui-btn-xs" target="fm-amend">编辑</a>
                            <button data-id="${e.Id}" class="del-btn layui-btn layui-btn-xs layui-btn-danger">删除</button>
                        </td>
                    </tr>
                `)
            })
            $('tbody').empty().append(arr.join(''))

            // 分页
            renderPage(res)
        })
    }


    // 格式化日期 封装函数
    function formatDate(time) {
        let dt = new Date(time)
        let y = padZero(dt.getFullYear())
        let m = padZero(dt.getMonth())
        let d = padZero(dt.getDate())
        let hh = padZero(dt.getHours())
        let mm = padZero(dt.getMinutes())
        let ss = padZero(dt.getSeconds())

        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    }

    function padZero(n) {
        return n < 10 ? '0' + n : n
    }


    // 初始化文章分类列表   并封装
    initArtCateList()

    function initArtCateList() {
        axios({
            method: 'GET',
            url: '/my/article/cates'
        }).then(res => {
            // console.log(res);
            if (res.data.status != 0) {
                return layui.layer.msg(res.data.message)
            }
            layui.layer.msg(res.data.message)
            let arr = ['<option value="">请选择分类</option>']
            res.data.data.forEach(e => {
                if (e.Id < 0) return
                arr.push(`<option value="${e.Id}">${e.name}</option>`)
            })
            $('[name=cate_id]').empty().html(arr.join(''))
                // layui的表单需要调用此方法才能渲染
            layui.form.render()
        })
    }

    // 筛选
    $('#searchForm').on('submit', function(e) {
        e.preventDefault()
        q.cate_id = $('[ name=cate_id]').val()
        q.state = $('[ name=state]').val()
        initArticleList()
    })


    //分页
    function renderPage(res) {
        layui.use('laypage', function() {
            // console.log(res.data.total)
            let laypage = layui.laypage
                //执行一个laypage实例
            laypage.render({
                elem: 'pageBox', //注意，这里的 test1 是 ID，不用加 #
                count: res.data.total, //数据总数，从服务端得到
                limit: q.pagesize, //每页显示的条数。laypage将会借助 count 和 limit 计算出分页数。
                curr: q.pagenum, //第几页
                layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
                limits: [2, 5, 10],
                jump: function(obj, first) {
                    //obj包含了当前分页的所有参数，比如：
                    // console.log(obj);
                    // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
                    // console.log(obj.limit); //得到每页显示的条数
                    //首次不执行
                    if (!first) {
                        q.pagenum = obj.curr
                        q.pagesize = obj.limit
                        initArticleList()
                    }
                },

            })
        })
    }

    //删除
    $('tbody').on('click', '.del-btn', function() {
        let id = $(this).attr('data-id')


        layer.confirm('是否删除', { icon: 3, title: '提示' }, function(index) {
            axios({
                method: 'GET',
                url: '/my/article/delete/' + id,
            }).then(res => {
                if (res.data.status != 0) {
                    return layui.layer.msg(res.data.message)
                }
                layui.layer.msg(res.data.message)
                    // if判断
                    // if ($('.del-btn').length == 1 && q.pagenum >= 2) q.pagenum--
                    // 短路运算
                $('.del-btn').length == 1 && q.pagenum >= 2 && q.pagenum--

                    initArticleList()
            })
            layer.close(index)
        })
    })


    //编辑修改

    $('tbody').on('click', '.amend', function(e) {
            layer.open({
                type: 1,
                title: '在线调试',
                area: ['1400px', '800px'],
                content: `
            <div class="box">
            <iframe src="/拓展/amend/amend.html" name="fm-amend"></iframe></div>`,
                end: function() {
                    initArticleList()
                }
            })
        })
        //预览
    $('tbody').on('click', '.preview', function(e) {
        layer.open({
            type: 1,
            title: '在线调试',
            area: ['1400px', '800px'],
            content: `
            <div class="box">
            <iframe src="/拓展/preview/preview.html" name="fm-preview"></iframe></div>`,
            end: function() {
                initArticleList()
            }
        })
    })


})